
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Phaser Sandbox Frame</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        #game {
            width: 50%;
            min-width: 400px;
            height: auto;
            min-height: 225px;
            border: 1px solid #f7d79f;
        }
    </style>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/phaser/3.52.0/phaser.min.js" type="text/javascript"></script>
</head>

<body>

    <div id="game"></div>

    <script type="text/javascript">

    var _isAlive = false;

    window.onload = function() {
        _isAlive = true;
    }

    window.addEventListener('message', function (e) {

        var mainWindow = e.source;

        if (e.data == 'ping')
        {
            mainWindow.postMessage(_isAlive, event.origin);
        }
        else
        {
            try {
                console.log(e)
                eval(e.data);
            } catch (e) {
                console.warn(e);
                //  This could probably be displayed in a modal of some kind in the main page
                mainWindow.postMessage(e, event.origin);
            }
        }

    });

    </script>

</body>
</html>
